import 'package:flutter/material.dart';
import 'package:flutter_duqin/components/avatar_role_name.dart';
import 'package:flutter_duqin/components/comment_like_read.dart';
import 'package:flutter_duqin/config/app_colors.dart';
import 'package:flutter_duqin/models/article_model.dart';
import 'package:flutter_duqin/utils/util.dart';

class ArticleCard extends StatefulWidget {
  final ArticleItem articleItem;
  const ArticleCard({Key? key, required this.articleItem}) : super(key: key);

  @override
  State<ArticleCard> createState() => _ArticleCardState();
}

const double paddingSize = 20;
const double spaceSize = 10;

class _ArticleCardState extends State<ArticleCard> {
  double boxSize = 0;
  @override
  Widget build(BuildContext context) {
    boxSize = MediaQuery.of(context).size.width - paddingSize * 2;
    return Container(
      padding: const EdgeInsets.all(paddingSize),
      color: Colors.white,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        _title(),
        const SizedBox(
          height: paddingSize,
        ),
        _cover(),
        const SizedBox(
          height: paddingSize,
        ),
        _bottom()
      ]),
    );
  }

  Widget _title() {
    return Text(
      widget.articleItem.title,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(color: AppColors.active, fontSize: 16),
    );
  }

  /// coverType:
  // 1张 => 1 种, 1
  // 2张 => 2 种, 1,2
  // 3张 => 2 种 + 4 种, 2,3,4,5,6,7
  // 4张 => 2 种 + 4 种 + 1 种, 2,3,4,5,6,7,8
  int _getTypeByCount() {
    var length = widget.articleItem.coverUrlList.length;
    int coverType;
    switch (length) {
      case 2:
        coverType = getRandmonRangeInt(2, 3);
        break;
      case 3:
        coverType = getRandmonRangeInt(2, 7);
        break;
      case 4:
        coverType = getRandmonRangeInt(2, 8);
        break;
      default:
        coverType = 1;
        break;
    }
    return coverType;
  }

  _getCoverByType() {
    int coverType = _getTypeByCount();
    Widget _coverWidget;
    switch (coverType) {
      case 2:
        _coverWidget = _cover2();
        break;
      case 3:
        _coverWidget = _cover3();
        break;
      case 4:
        _coverWidget = _cover4();
        break;
      case 5:
        _coverWidget = _cover5();
        break;
      case 6:
        _coverWidget = _cover6();
        break;
      case 7:
        _coverWidget = _cover7();
        break;
      case 8:
        _coverWidget = _cover8();
        break;
      default:
        _coverWidget = _cover1();
        break;
    }
    return _coverWidget;
  }

  /// 2 横 2 竖
  Widget _cover8() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        const SizedBox(
          height: spaceSize,
        ),
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 3),
            ),
          ],
        ),
      ],
    );
  }

  /// 1 横 2 竖
  Widget _cover7() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 0),
        ),
        const SizedBox(
          height: spaceSize,
        ),
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
          ],
        ),
      ],
    );
  }

  /// 2 竖 1 横
  Widget _cover6() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        const SizedBox(
          height: spaceSize,
        ),
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 2),
        ),
      ],
    );
  }

  /// 2 横 1 竖
  Widget _cover5() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            const SizedBox(
              height: spaceSize,
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 2),
        ),
      ],
    );
  }

  /// 1 竖 2 横
  Widget _cover4() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 0),
        ),
        Column(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
            const SizedBox(
              height: spaceSize,
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
          ],
        ),
      ],
    );
  }

  /// 2 横
  Widget _cover3() {
    return Column(
      children: [
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 0),
        ),
        const SizedBox(
          height: spaceSize,
        ),
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 1),
        ),
      ],
    );
  }

  /// 2 竖
  Widget _cover2() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 0),
        ),
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 1),
        )
      ],
    );
  }

  /// 1 横
  Widget _cover1() {
    return SizedBox(
      width: boxSize,
      height: boxSize,
      child: _cover(index: 0),
    );
  }

  Widget _cover({int index = 0}) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: FadeInImage.assetNetwork(
        placeholder: 'assets/images/common/lazy-1.png',
        image: widget.articleItem.coverUrlList[index],
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _bottom() {
    return Row(
      children: [
        Expanded(
          child: AvatarRoleName(
            coverPictureUrl: widget.articleItem.user.coverPictureUrl,
            nickname: widget.articleItem.user.nickname,
            showType: true,
            type: widget.articleItem.user.type,
          ),
        ),
        Expanded(
          child: CommentLikeRead(
              commentCount: widget.articleItem.commentCount,
              thumbUpCount: widget.articleItem.thumbUpCount,
              readCount: widget.articleItem.readCount),
        )
      ],
    );
  }
}
